﻿<div class="tabbable tabs-left" data-bind="if: Loaded">
    <ul class="nav nav-tabs" data-bind="foreach: DefinitionsSorted">
        <li><a data-toggle="tab" data-bind="text: Name, attr: {href : '#'+Name}"></a></li>
    </ul>
    <div class="tab-content" data-bind="foreach: Definitions">

        <div class="tab-pane" data-bind="attr: {id : Name}">

            <h3 data-bind="text: Label"></h3>

            @*TODO: Filters if grid*@

                    <!-- ko if: Type == 0 || Type == 2 -->
            <div data-bind="foreach: Fields, attr: {id : 'acc'+ Name}" class="accordion">
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-bind="attr: {'data-parent' : '#acc'+ $parent.Name, href : '#' + $parent.Name + '_' + $data.Property}">
                            <span data-bind="text: Property"></span>
                            <!-- ko if: !!Role -->
                            <span data-bind="text: ' (' + Role + ')'"></span>
                            <!-- /ko -->
                        </a>
                    </div>
                    <div data-bind="attr: {id : $parent.Name + '_' + $data.Property}" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <a class="btn" href="#" data-bind="click: $parent.remove"><i class="icon icon-trash"></i>Delete</a>
                            <label>Label:</label>
                            <input type="text" data-bind="value: Label" />
                            <label>Property</label>
                            <input type="text" data-bind="value: Property" disabled="disabled" />
                            <label>Order:</label>
                            <input type="text" data-bind="value: Order" />
                        </div>
                    </div>
                </div>
            </div>
            <!-- /ko -->

            <!-- ko if: Type == 1 -->
            <div data-bind="foreach: Fields, attr: {id : 'acc'+ Name}" class="accordion">
                <div class="accordion-group">
                    <div class="accordion-heading">
                        <a class="accordion-toggle" data-toggle="collapse" data-bind="attr: {'data-parent' : '#acc'+ $parent.Name, href : '#' + $parent.Name + '_' + $data.Property}">
                            <span data-bind="text: Property"></span>
                        </a>
                    </div>
                    <div data-bind="attr: {id : $parent.Name + '_' + $data.Property}" class="accordion-body collapse">
                        <div class="accordion-inner">
                            <a class="btn" href="#" data-bind="click: $parent.remove"><i class="icon icon-trash"></i>Delete</a>
                            <label>Label</label>
                            <input type="text" data-bind="value: Label" />
                            <label>Property</label>
                            <input type="text" data-bind="value: Property" disabled="disabled" />
                            <label>Order:</label>
                            <input type="text" data-bind="value: Order" />
                            <label>Control</label>
                            <input type="text" data-bind="value:  $root.displayFormType($data.Type)" disabled="disabled" />
                        </div>
                    </div>
                </div>
            </div>
            <!-- /ko -->

            <!-- ko if: $data.Type != 1 -->
            @*Display for grid and view*@
                    <a class="btn" data-bind="click:$root.addField2View"><i class="icon-plus"></i>Add Field</a>
            <a class="btn" data-bind="click:$root.addRelField2View"><i class="icon-resize-full"></i>Add Relation</a>
            <!-- /ko -->

            <!-- ko if: $data.Type == 1 -->
            @*Display for forms only*@
                    <a class="btn" data-bind="click:$root.addField2Form"><i class="icon-plus"></i>Add Form Field</a>
            <a class="btn" data-bind="click:$root.addRelField2Form"><i class="icon-plus"></i>Add Form Relation</a>
            <!-- /ko -->
            <hr />
            <a class="btn" data-bind="click: $root.save">Save</a>

            @*@foreach (var field in def.Fields)
                    {
                        <div>@field.Label</div>
            }*@
        </div>
    </div>
</div>
